<template>
	<view class="page-content">
		<!-- <u-tabs :list="tabs" :activeStyle="{color:'#3f2a17',fontSize:'28rpx'}" :inactiveStyle="{fontSize:'26rpx'}" lineColor="#f2bc35" :scrollable="false" @change="tabChange"></u-tabs> -->
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0" :emptyText="$t('message.empty')"></m-loading>
		<view class="message-list_list" v-if="!listLoad">
			<view class="list-item m-md radius-10 flex-between" :class="{on : item.isread}" v-for="(item,index) in list.data" :key="index" @click="readMessage(item,index)">
				<view class="list-item_conter text-sm">
					<view class="list-item__title">
						<text>{{item.message_title}}</text>
					</view>
					<view class="list-item__info text-xs text-secondary">
						{{ item.message_info }}
					</view>
					<view class="list-item__time text-xs text-auxiliary">
						<text>{{item.create_time}}</text>
					</view>
				</view>
				<view class="list-item_state">
					<text class="text-auxiliary text-md"  :class="{'text-danger' : !item.isread}">{{ item.isread ? '已读' : '未读'}}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="showLoading"></uni-load-more>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// import {User} from '../../model/user.js'
	export default {
		data() {
			return {
				onType:'',
				showLoading:false,
				listLoad:true,
				status:"loading",
				listEmptyShow:false,
				scrollTop: 0,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			tabs: state => state.user.messageTabs,
			list: state => state.user.messageList,
			param: state => state.user.messageParam,
			contentText: state => state.content.contentText,
		}),
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		onLoad(){

		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			this.getList();
		},
		
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		async onPullDownRefresh(){
			await this.getList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		// 下滑加载数据
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);
		},
		
		methods: {
			...mapActions(['getUserInfo','getUserMessage']),
			...mapMutations(['updateUserState']),
	
			async getList(page = 0){
				if (page) {
					let param = uni.$u.deepClone(this.param)
					param.page = page
					this.updateUserState({
						key: 'messageParam',
						val: param
					})
				}
				this.getUserMessage(this.param)
				this.listLoad = false
			},
			
			async readMessage(Item,Index){
				let res = await this.$api.user.readUserMessage(Item.id)
				if(res.code == 200){
					let thos = this
					this.list.data[Index]['isread'] = true;
					if(Item.url){
						// 跳转
						uni.navigateTo({
							url: Item.url
						});
					}
					this.getUserInfo()
				}
			},
			
			tabChange(index){
				this.listLoad = true;
				this.showLoading = false;
				let param = uni.$u.deepClone(this.param)
				param.message_type = index.type
				this.updateUserState({
					key: 'messageParam',
					val: param
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1);
			}
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
	}
	.u-tabs{
		background-color: #fff;
		border-bottom: 1px solid #f3f3f3;
	}
	.uni-load-more{
		height: 10vh;
		margin-top: 20rpx;
	}
	.list-item{
		position: relative;
		padding: 15px 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		flex-wrap: nowrap;
		align-items: flex-start;
		&_conter{
			width: 100%;
			margin-left: 5px;
		}
		&__title{
		}
		&__info{
			margin: 5px 0;
		}
		&__time{
		}
		&_state{
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			// font-size: 45rpx;
			// transform:rotate(40deg);
			font-weight: bold;
			opacity: .3;
		}
	}
	.list-item:last-child{
		border-bottom: none;
		// display: none;
		// background-color: red;
	}
	.list-item.on{
		.list-item__title{
			color: #999!important;
		}
		.list-item__info{
			color: #999;
		}
		/deep/ .i-icon span{
			color: #999;
		}
		// background-color: red;
	}
</style>
